import React, { useState } from 'react';

// @ts-ignore
import { KeepAlive, Button } from 'abc-ui';

const { AliveScope } = KeepAlive;

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      count: {count}
      <Button onClick={() => setCount(count => count + 1)}>add</Button>
    </div>
  );
}

export default () => {
  debugger;
  const [show, setShow] = useState(true);
  return (
    <AliveScope>
      <div>
        <Button onClick={() => setShow(show => !show)}>Toggle</Button>
        <p>无 KeepAlive</p>
        {show && <Counter />}
        <p>有 KeepAlive</p>
        {show && (
          <KeepAlive id="Test">
            <Counter />
          </KeepAlive>
        )}
      </div>
    </AliveScope>
  );
};
